Tutorial (part 2) : Creating Image Maps with wwwART

The Web Image Map palette (shown below) is used to create an Web image map for an image on a Web page. A Web image map is a set of areas "mapped" onto an image displayed in a Web page. These areas act as buttons or "hot-links"- when you click in one of those areas of the image, a different Web page will be loaded.

A good example of this would be a Web page with a map of the United States displayed on it. A Web image map could be set up so that when you clicked on a state in the picture, a Web page about that state would be displayed.

In this part of the wwwART tutorial, we're going to cover the basics of creating a Web page with an Image Map. Many Web site "home pages" are just a big image with various "button" areas defined on the image using a Web image map.

Note that actual "buttons" aren't displayed by an image map - an image map merely describes the shape and location of the areas on the image that will cause a Web page to be loaded when clicked. Web site designers will often have a picture of a button on their image and associate an area in an image map with it...but you don't have to do that.

Let's get started

Open the "bridges.jpg" file that you will find in the "wwwART Tutorial"folder that was installed in the same folder as the wwwART application:

The "bridges.jpg" file looks like this when opened:

We're going to make a Web page similar to the one used by the Madison County, Iowa Chamber of Commerce, to promote their county, made famous by the book and movie "The Bridges of Madison County" (of course, the images on the Madison County Web pages were created with MicroFrontier products!)

The difference between their page and ours is that the image on our page will have a Web Image Map associated with it so you can click on various parts of the picture to cause different pages of the real Madison County Web site to be displayed.

Specifically, we'll set up "buttons" on the "Welcome to Madison County!"text, the bridge in the center of the picture and on the text in the "button bar" at the bottom of the picture. In fact, we've actually done so in the above image. Try it - point and click in the image shown above on the areas for which we indicated we'd be setting up buttons.

This is an example of a "client-side" image map and doesn't work on all Web browsers - but most recent browsers from Netscape and Microsoft and others should support it. We can't imbed a "server-side" image map (the other of the two types of image map files) in this tutorial, as this tutoriual probably won't be loaded onto an actual Web server - and that's a requirement to use a server-side image map.

Drawing Tools on the Web Image Map palette

There are four shape-drawing tools in the Web Image Map palette:

These four tools let you draw rectangle, circle, polygon and point areas on the image. We'll be using only rectangles and polygons in this tutorial.

These tools work very much like the rectangle, circle and polygon painting tools in the Tools palette, but instead of leaving paint behind, they draw shapes that specify regions on the image that act like "buttons". The shapes you draw with these tools are not paint and do not become part of the image itself. The shapes have little square "handles" at the corners which you can drag to change the size of the region. You can also point anywhere inside the shape (we recommend aiming for the center of the shape) and drag the whole shape to reposition it.

To drag the handles or move the shape itself, you must switch to the Web Image Map arrow tool.



In the center of each shape is a number. This indicates the order of that shape in the image map file that will be generated. If two shapes overlap, the shape with the lowest number is the one that is activated when you click in the area of overlap.

You can use the Move buttons to change the order of the shapes in the image map so that they have a lower or higher number. Select a shape with the Web Image Map arrow tool (shown above) and then click any of the 4 move buttons. Usually you'll use the last two tools (Move Forward and Move Backward, respectively) to change the order of two shapes that overlap. However, the first two tools can be used to quickly promote or demote a shape to the lowest or highest number in the image map.

Let's make some "buttons!"

Use the Rectangle shape-drawing tool in the Web Image map palette (the first of the four tool icons shown above) to draw four rectangles on the bridges.jpg image, as shown in light blue below (the ones numbered 1 through 4). They don't have to be exactly like those shown below - close is good enough.

Note that initially when you draw them, the shapes will probably be drawn with black lines instead of light blue. We changed the color of the lines in the picture above using the Link Color Picker button on the Web Image Map palette. This button is used to let you change the color (initially black) used to draw the frames of the image map shapes. This can be important if the image you are working on is black or very dark. When you click it, a standard Apple Color Picker dialog box will display to let you choose some other color to use to draw the frames around the shapes instead of black.

Here are the buttons to draw:

1. Draw a rectangle around the text Visitor Information" at the bottom of the picture.

2. Draw a second rectangle around the text "The Bridges."

3. Draw a third rectangle around the text "The Movies."

4. Draw a fourth rectangle around the text "Birthplace of John Wayne."

5. Next, use the Polygon drawing tool (the third tool icon of the four tools shown above) to draw a shape around the bridge in the picture (as shown in the item numbered 5 above).

When you get all the way around the bridge and are near to your starting point again, you have to find the starting point so you can click on it to close the Polygon. To help you find the start point, the cursor shape will change to let you know that you're near the starting point. When it changes, click the mouse button to close the polygon.

6. Finally, use the Rectangle tool again to draw a box around "Welcome to Madison County."

Remember - if you need to move or resize any of the shapes you drew above for some reason, switch to the Arrow tool in the Web image map palette and then you can drag the handles at the corner of the shapes, or the shape itself, to reposition or resize them.

Circles and Points

We won't be using the Circle or Point tools in this tutorial. They work the same as the two tools we have used with two exceptions:

1. The Circle tool draws only circles - it won't draw ovals. There are several variants of the NCSA server-side image map standards (more on that later) that support ovals as well as circles, but since that is not part of either the NCSA or CERN defined standards, wwwART does not support them. The Circle Shape is not used as much as rectangles or polygons, since for most Web servers it can only be a circle, not an oval and that limits where you can use it.

2. The Point tool draws only a tiny rectangle just slightly larger than the box containing the button's number. You can't resize that rectangle since it is marking a Point, not a Rectangle. The Point shape is used used only in rare instances. It is better to use a rectangle, circle or polygon shape in most cases. However, if you must use Points, you need not bother to have a default setting (discussed later).

NOTE: Points are only supported by NCSA server-side image maps. They will be ignored (and not saved) if you create points and then save a CERN server-side image map or a client-side image map.

Refer to a reference book on HTML for a further discussion of using Circles or Points in Web image maps.

Setting the URLs for each button

After drawing all the buttons so that they look (and are numbered) approximately as shown above, we now need to set the URL (Web page address) that each of the 6 numbered buttons goes to when you click in that area of this image on the Web page. We will also set a "default" URL that will be activated if someone clicks outside of any of the 6 buttons.

1. Click on the first button (the one around the "Visitor Information" text, and numbered "1" in the picture above) using the Web Image Map arrow tool. Handles will appear on the button area to let you know you've selected it.

2. Click the URL button.

3. In the URL entry dialog box that appears, type the URL for the Madison County Visitor Information page and click the OK button. In this case, the URL is:

http://www.madisoncounty.com/county.html

NOTE: There is no need to press RETURN at the end of a URL!

Repeat steps 1 - 3 above for each of the other 5 buttons. Here are the URL's to enter for each of the other 5 buttons:

Button 2: http://www.madisoncounty.com/bridge.html

Button 3: http://www.madisoncounty.com/movie.html

Button 4: http://www.johnwaynebirthplace.org/

Button 5: http://www.madisoncounty.com/bridge.html

Button 6: http://www.madisoncounty.com/

Note that a couple of these URLs are the same; that was done intentionally in this case; if someone clicks on the bridge itself in the picture, or on the words "The Bridges", it will go to the same page, for example.

TIP: It's a good idea to make any obvious "objects" in an image map (such as the bridge and the title in our example) be objects on the image map, and have a URL associated with them, even if it duplicates a URL elsewhere in the image. People tend to click on the obvious objects in an image on a Web page to see what they'll do.

NOTE: We should also mention that at the time of this writing (April, 1997), the URL shown above for the John Wayne Birthplace had been requested but was not yet activated. Hopefully it will be active soon.

Setting the "default" location

Some types of image maps (but not all) support creating a "default"URL so that if you click somewhere outside any of the other shaped regions you've specified above, it will go to a specific URL (usually a generic page with information abut the site or company).

Initially, wwwART sets this to "http://www.microfrontier.com/", our company's Web site. To change this:

1. Click with the Web Image Map arrow tool outside of any of the numbered regions you have created above.


2. Then click the URL button to open the URL entry dialog box.

In the dialog box that appears, type in the URL you want the Web page to go to if they click outside of any of the other areas. In this case, we recommend you set it to

http://www.madisoncounty.com/

The default setting works only for NCSA and CERN server-side image maps (discussed later). You can not create a default URL for "client-side" image maps. It's up to you whether or not you use a default on your Web page image maps. Sometimes it makes sense, and sometimes it does not.

NOTE: If you have specified any Point regions using the Point tool, they will override the default setting. It can't hurt to specify a default URL anyway, but be aware that it will be overriden by the Point regions you set. We should also note that it's rather pointless (pun intended) to have only one Point in a Web image map. In that cause, just set a default region instead - you get the same results.

Generate the image map files

Now that we have created regions for the image map and associated a URL with each, it's time to save the image map to file...or files.

Click on the popup menu arrow at the bottom right side of the Web Image Map palette. A menu will appear with various options for saving, opening and closing the current Web image map:

Choose Save Map. A standard Macintosh "save" dialog box will appear:

wwwART adds some additional items at the bottom (the NCSA and CERN radio buttons and the Save Client-side map also checkbox.)

Select the folder to save the image map file in. Usually it should go into the same folder as the image you are making the image map for, and that's usually the folder at which the save dialog box will be located. During this tutorial, when you save the map for the "bridges.jpg" file, the file name for the map file will initially be set to "bridges.map". You should normally not need to change this.

Set the NCSA or CERN radio buttons and the Save Client-side map also checkbox as necessary for your Web server's needs and click the Save button. wwwART will remember your settings of those buttons and use them again the next time you save an image map (since typically you'll use the same settings when creating all image maps on your Web site.)

Let's discuss what is contained in an image map file, and the various types of image map files you can save from wwwART.

What's in an image map file?

An image map file is just a text file, containing a list of the shapes, their coordinates and the URL associated with them that you drew and entered earlier in this tutorial. The Web server or Web browser uses this text to know where the "buttons"are on the image when you look at the Web page in a Web browser.

There are two kinds of of image map files; server-side and client-side.


Server side Image maps

Using NCSA or CERN "server-side" image maps from your Web page causes a program on the Web Server to be sent a message when someone clicks on one of the areas in the image you've set up in the image map. The program on the Web Server then causes your browser to load the Web page associated with the area you clicked on.

There are two types of server-side image maps, called NCSA and CERN after the institutions that invented them. wwwART will generate either type.

Here is an example of an NCSA image map file you'd get if you saved the image map we created for the bridges.jpg file:

rect http://www.madisoncounty.com/county.html 20,265 136,295
rect http://www.madisoncounty.com/bridge.html 153,264 238,296
rect http://www.madisoncounty.com/movie.html 248,265 320,295
rect http://www.johnwaynebirthplace.org/ 338,263 491,294
poly http://www.madisoncounty.com/bridge.html 63,98 116,231
458,230 460,143 173,84
rect http://www.madisoncounty.com/ 13,8 500,63
default http://www.madisoncounty.com/


Here is an example of a CERN image map file you'd get if you saved the image map we created for the bridges.jpg file:

default http://www.madisoncounty.com/
rectangle (20,265) (136,295) http://www.madisoncounty.com/county.html
rectangle (153,264) (238,296) http://www.madisoncounty.com/bridge.html
rectangle (248,265) (320,295) http://www.madisoncounty.com/movie.html
rectangle (338,263) (491,294) http://www.johnwaynebirthplace.org/
polygon (63,98) (116,231) (458,230) (460,143) (173,84)
http://www.madisoncounty.com/bridge.html
rectangle (13,8) (500,63) http://www.madisoncounty.com/

As you can see, they are just a list of the shapes, the coordinates, and the URL for each area on the image for which you drew a button on the bridges.jpg file (the numbers for the coordinates will vary slightly from those shown above, since you won't have drawn the shapes exactly where we did.)

A server-side image map file is usually saved with a name similar to the one used for the image, with ".map" on the end. For example, the CERN or NCSA server-side image map file for the "bridges.jpg" file used in this tutorial should usually be called "bridges.map" and saved in the same directory (folder) as the bridges.jpg file unless your Internet Service Provider (ISP) or Webmaster tells you differently.

wwwART will automatically generate the proper ".map" file name for you, based on the name of your image, so you won't normally have to worry about this.


How to use a server-side image map on your Web page

You should ask your Internet Service Provider or Webmaster which type of server-side image map file your Web Server supports, and how to access it from your HTML page. Here is an example of how to reference the image used in this tutorial.

<A HREF="/cgi-bin/imagemap/bridges.map"><IMG SRC="bridges.jpg"WIDTH=511 HEIGHT=310 ALT="bridges.jpg" ALIGN=MIDDLE BORDER=0 ISMAP></A>

Note the ISMAP parameter in the <IMG> tag - that must be added to indicate it's associated with an image map file.

It's also necessary to surround the image with <A HREF> and </A> tags and indicate the location of the program to receive and process the click on the image (that's the "/cgi-bin/imagemap" part) and the name of your image map file (that's the "/bridges.map" part) in the HREF=""parameter of the tag.

wwwART tries to set the information in the <A HREF> tag up properly for you based on the type of server-side image map you a created, but you may have to edit the information in the <A HREF> tag - not all Web servers are set up the same way.

Instead of "/cgi-bin/imagemap/bridges.map" you may have to use something else - your ISP or Webmaster will be able to tell you. If in doubt, try something like:

<A HREF="bridges.map">

because if your Web server has built-in support for image maps, that may be all you need. See any book on HTML for further details on using server-side image maps from your HTML.

Once you have saved a .map file, if it is in the same folder as the image it's associated with, wwwART will automatically open the image map file the next time you open the image.

NOTE: The file names must match for this to happen; for example, if your image is named "bridges.jpg", wwwART looks for a file named "bridges.map".


Client side image maps

The other type of image map is a "client-side" image map. Instead of a separate file residing on your Web server, the information for a client-side image map goes right in the HTML code for your Web page. Client side image maps only work with "recent" browsers such as the most recent versions Microsoft Internet Explorer or Netscape Navigator. Some older Web browsers won't support them. The positive side of client-side image maps is that they don't require that the Web server support image maps at all - no special setup on the Web server is necessary!

When you save an image map from wwwART, if you check the Save client-side map also checkbox, in addition to saving an CERN or NCSA server-side .map file, a simple HTML Web page file will be saved containing the client-side image map for your image.

This file is a text file (in Apple SimpleText format), with a name ending in .html.

This file is actually a simple, but fully-functional Web page! It is ready to be used right away, although you will normally want to edit it with a text editor or Web Page editor to change the page's title and add additional information about your Web site.

You can use this file as the starting point for your Web page or you can copy and paste the client-side image map HTML tags to a different Web page.

To try it out, just drag the file whose name ends in .html onto the program icon of any Web browser that supports client-side image maps. It'll load it up and display the image, and the image map will be functional.

Like the server-side .map file discussed earlier, wwwART will automatically add the ".html" onto the end of the name of your image file. For the example graphic being used in this tutorial, named "bridges.jpg", a file named "bridges.html"would be created.

NOTE: Unlike the .map file, you are NOT prompted by wwwART for the name of the .html file The client-side image map file will OVERWRITE any previous version of that file (bridges.html, in this tutorial) that may exist, so only save a client-side image map when you are done defining your image map shapes. Remember not to edit the .html file with a text or Web Page editor until you are sure you are done defining your shapes so that you don't risk accidentally losing your changes to the .html file. It is probably a good idea to rename the .html file immediately after wwwART creates it if you are going to edit it, or use it as a starting point for your own Web page, to avoid losing any information if you go back and edit the shapes later and re-save the map files.

Here is what the client-side image map file generated by wwwART looks like:

<HTML>
<HEAD>
<META NAME="GENERATOR" CONTENT=" MicroFrontier wwwART 2.0 - http://www.microfrontier.com">
<TITLE>wwwART Graphic with image map</TITLE>
</HEAD>

<BODY>

<A HREF="/cgi-bin/imagemap/bridges.map"><IMG SRC="bridges.jpg"WIDTH=511 HEIGHT=310 ALT="bridges.jpg" ALIGN=MIDDLE BORDER=0 ISMAP USEMAP="#wwwART Map"></A>

<MAP NAME="wwwART Map">
<AREA SHAPE="RECT" COORDS="20,265 136,295"
HREF="http://www.madisoncounty.com/county.html">
<AREA SHAPE="RECT" COORDS="153,264 238,296"
HREF="http://www.madisoncounty.com/bridge.html">
<AREA SHAPE="RECT" COORDS="248,265 320,295"
HREF="http://www.madisoncounty.com/movie.html">
<AREA SHAPE="RECT" COORDS="338,263 491,294"
HREF="http://www.johnwaynebirthplace.org/">
<AREA SHAPE="POLY" COORDS="63,98 116,231 458,230 460,143 173,84"
HREF="http://www.madisoncounty.com/bridge.html">
<AREA SHAPE="RECT" COORDS="13,8 500,63" HREF="http://www.madisoncounty.com/">
</MAP>

</BODY>
</HTML>

The actual client-side map information in the HTML file shown above is just the <MAP>and <AREA> HTML tags:

<MAP NAME="wwwART Map">
<AREA SHAPE="RECT" COORDS="20,265 136,295"
HREF="http://www.madisoncounty.com/county.html">
<AREA SHAPE="RECT" COORDS="153,264 238,296"
HREF="http://www.madisoncounty.com/bridge.html">
<AREA SHAPE="RECT" COORDS="248,265 320,295"
HREF="http://www.madisoncounty.com/movie.html">
<AREA SHAPE="RECT" COORDS="338,263 491,294"
HREF="http://www.johnwaynebirthplace.org/">
<AREA SHAPE="POLY" COORDS="63,98 116,231 458,230 460,143 173,84"
HREF="http://www.madisoncounty.com/bridge.html">
<AREA SHAPE="RECT" COORDS="13,8 500,63" HREF="http://www.madisoncounty.com/">
</MAP>


You can cut and paste the <MAP> and <AREA> tags from the .html file that wwwART generates into a different Web page, if you like. After doing that, to associate the client-side map in your Web page with the image, in the <IMG>tag that displays the image you add the USEMAP parameter as shown below:

<IMG SRC="bridges.jpg" WIDTH=511 HEIGHT=310 ALT="bridges.jpg"ALIGN=MIDDLE BORDER=0 ISMAP USEMAP="#wwwART Map">

Which style of image map should I use?

We recommend that you save both a server-side (NCSA or CERN) and a client side image map.

In fact, wwwART creates the .html file's client-side image map information so it also refers to the server-side .map file, in case the .html file is being used by a Web browser that doesn't support client-side image maps.

That way, no matter what Web browser or Web server is being used, the image map will probably still work.

Tips about using Image Maps

1. It is not a good idea to rely on an Image Map to be the sole way to navigate a Web site. Some people browse the Web with image loading turned off, so they won't see your image. And some of the new Personal Digital Assistants and other handheld computers, such as Apple's Newton MessagePad 2000, come with Web browsers that, due to having to run in very limited memory, do not support image maps or normally run with image loading turned off.

You should therefore always provide a set of similar hot-links to those in your image map, but using text instead of images. By convention, it's placed underneath the image map. It should look something like this (using the image map for Madison County we created above as an example):

| Vistor Info | The Bridges | The Movie | Birthplace of John Wayne |

You'll note that this is similar to the graphical button bar at the bottom of the picture.

2. If you use a large image with an image map as the first thing the customer sees on your Web site's home page, do everything you can to shrink the size of the image so that it will load as fast as possible. If it takes too long for your image to load, people may stop it and go to some other Web site.

Saving a large image as a JPEG file usually results in the smallest possible file size, but experiment -- save in both GIF and JPEG formats to see which is smallest, and use the one that looks best and is smallest.

If you use a GIF, make sure to use the "Interlaced" and "Minimize Color Table" options when saving to reduce the size of your GIF image.

Bugs & Quirks in the Image Map standards

The Web is a rapidly growing medium, and sometimes a few bugs or inconsistencies creep in to make our lives a little difficult. Here is one we've found related to image maps that you should be aware of:

We have discovered that there are a number of of non-standard variations in the "circle"shape defined by NCSA for image maps

- circle centerpoint, edgepoint
- circle centerpoint, radius
- circle top-left, bottom-right
- oval top-left, bottom-right

The official NCSA standard is "circle centerpoint, edgepoint", and that's what wwwART supports. We do not support the other formats. Our testing on the Web servers available to us found the official NCSA standard to be the one used, but our research indicates that there are a few servers that don't follow the standard.

If you have a Web server that doesn't support the NCSA standard correctly, please report the problem to the server vendor so they can correct it. If you need to modify the circle we create to work on a non-standard server, you can easily calculate the radius, or the top-left / bottom-right coordinates from the standard NCSA center point and edge point coordinate that wwwART generates.

In our experience, servers that support CERN image maps don't seem to have any variations on the "circle" shape like some NCSA compatible Web servers apparently do, so if your Web server allows you to use either type, we recommend using CERN format for your server-side image maps, instead of NCSA.

The Official Definitions of Server Side Image Maps

NCSA and CERN file definitions are available at:

NCSA: http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagemapping.html

CERN: http://www.w3.org/hypertext/WWW/Daemon/User/CGI/HTImageDoc.html

Miscellaneous Tips and Tricks

Creating an image map regions from a Selection
If you have created a selection using one of the selection tools in the Tools palette such as the Shape Selection, Lasso or, Magic Wand tools:

you can immediately turn that selection into an Image Map region without having to draw the region using the tools in the Web Image Map palette.

Just pick Selection->Add to Web Image Map and the selection will be turned into a Web Image map region (usually a polygon of some sort). Be cautious with this feature - if your selection is too complex, it may take a LONG time to create a Web Image map region, or it may exceed the limits that are allowed by image maps for polygons (usually 100 line segments).

For Further Information

This tutorial is not intended to teach you everything there is to know about Web image maps. For further information on image maps, consult any of the many books on HTML or Web publishing that are available at libraries and bookstores.

Our favorite is "Teach Yourself Web Publishing with HTML in 14 Days"by Laura Lemay, published by Sams.net Publishing.

http://www.microfrontier.com/


Thanks for using wwwART!

Go to Chapter: | Previous | Next |

| Contents | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Tutorial |

Go to MicroFrontier Web Site